<!-- 蓝色简洁登录页面 -->
<template>
  <view class="t-login">
    <!-- 标题 -->
    <view class="t-b">{{ title }}</view>
    <!-- 页面装饰图片 -->
    <image :showLoading="true" src="@/static/u98.svg"></image>
    <!-- 页面间隔    -->
    <view class="t-g"/>
    <form class="cl">
      <view class="t-a">
        <input type="number" name="phone" placeholder="请输入注册手机号" maxlength="11" v-model="phone"/>
      </view>
      <view class="t-a">
        <input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="yzm"/>
        <view v-if="showText" class="t-c" @tap="getCode()">发送短信</view>
        <view v-else class="t-c">重新发送({{ second }})</view>
      </view>
      <view>
        <text class="t-p">
          <checkbox color="rgb(240, 95, 93)" size="14" value="cb" :checked="isCheckProtocol"/>
          我已阅读并同意
          <navigator open-type="navigate" url="/pages/auth/login">用户协议、隐私协议</navigator>
        </text>
      </view>

      <button @tap="register()">立即注册</button>
      <text class="t-p">已有账号？
        <navigator open-type="navigate" url="/pages/auth/login">立即登录</navigator>
      </text>
    </form>

  </view>
</template>
<script>
import userApi from '@/api/user'
import passData from '@/api/requstUtil'

export default {
  data() {
    return {
      title: '注册开赢平台', //填写logo或者app名称，也可以用：欢迎回来，看您需求
      phone: '', //手机号码
      yzm: '',//密码
      showText: true, //是否显示发送验证码按钮
      second: 60, //倒计时
      isCheckProtocol: true,
      userId: ''
    };
  },
  onLoad(option) {
    console.log('注册', option)
    if (option.sharId) {
      this.userId = option.sharId
    }
  },
  methods: {
    //当前登录按钮操作
    register() {

      //参数校验
      if (!this.registerCheck()) {
        return;
      }

      let param = {
        phone: this.phone,
        smsCode: this.yzm,
        smsCodeType: "USER_REGISTER"
      };
      userApi.checkSmsCode(param).then(res => {
        let data = passData(res);
        if (data) {
          let userData = {...data, phone: this.phone, smsCode: this.yzm, upperUserId: this.userId};
          console.log('userData', userData)
          uni.navigateTo({
            url: '/pages/auth/fillInfo',
            success: (res) => {
              res.eventChannel.emit('getUserData', userData)
            }
          });
        }
      });


    },

    //获取短信验证码
    getCode() {
      if (this.checkPhoneNum()) {

        let data = {
          phone: this.phone,
          sendSystem: "MINIP",
          smsCodeType: "USER_REGISTER",
          smsCodeTemplate: '22345',
          tenantId: 'gysk'
        };
        userApi.loginSms(data).then(res => {
          console.log("12334455667667", res)
          this.changeCodeButton();
        })

      }
    },
    checkPhoneNum() {
      if (!this.phone) {
        uni.showToast({title: '请输入手机号', icon: 'none'});
        return false;
      }
      if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
        uni.showToast({title: '请输入正确手机号', icon: 'none'});
        return false;
      }
      return true;
    },
    registerCheck() {

      if (!this.checkPhoneNum()) {
        return false;
      }
      if (!this.isCheckProtocol) {
        uni.showToast({title: '请勾选协议', icon: 'none'});
        return false;
      }
      if (!this.yzm) {
        uni.showToast({title: '请输入验证码', icon: 'none'});
        return false;
      }
      return true
    },
    changeCodeButton() {
      var that = this;
      var interval = setInterval(() => {
        that.showText = false;
        var times = that.second - 1;
        that.second = times;
      }, 1000);
      setTimeout(() => {
        clearInterval(interval);
        that.second = 60;
        that.showText = true;
      }, 60000);
    },
  }
};
</script>
<style>

.t-login {
  width: 600rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;
}

.t-login button {
  font-size: 14px;
  background: rgb(240, 95, 93);
  color: #fff;
  height: 42px;
  line-height: 45px;
  border-radius: 9px;
  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
  width: 55%;
}

.t-login input {
  padding: 0 10px 0 21px;
  height: 46px;
  line-height: 46px;
  margin-bottom: 26px;
  background: #f8f7fc;
  border-bottom: 1px solid #e9e9e9;
  font-size: 15px;
  border-radius: 5px;
}

.t-login .t-a {
  position: relative;
}

.t-login .t-a image {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 40rpx;
  top: 28rpx;
  border-right: 2rpx solid #dedede;
  padding-right: 20rpx;
}

.t-login .t-b {
  font-size: 18px;
  color: #000;
  padding: 35px 0 30px 0;
  font-weight: bold;
  text-align: center;
}

.t-login .t-c {
  position: absolute;
  right: 11px;
  top: 11px;
  color: rgb(240, 95, 93);
  font-size: 12px;
  border-radius: 26px;
  height: 26px;
  line-height: 26px;
  padding: 0 13px;
  border: 1px solid rgb(240, 95, 93);
}


.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 80rpx 0;
}

.t-login {
  .t-p {
    text-align: center;
    display: block;
    margin: 16px auto auto 10px;
    position: relative;
    font-size: 15px;

    color: #cccccc;

    uni-navigator {
      display: contents;
      color: rgb(240, 95, 93);
    }

    uni-checkbox {
      .uni-checkbox-input {
        border-radius: 50%;
        width: 15px;
        height: 15px;
      }
    }

    uni-checkbox-input {
      right: 8px;
    }

  }
}


.t-g {
  padding-top: 30px;
}

.t-login .t-f text {
  margin-left: 20rpx;
  color: #aaaaaa;
  font-size: 27rpx;
}

.t-login .uni-input-placeholder {
  color: #000;
}

.cl {
  zoom: 1;
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '\20';
}

.t-login .uni-input-placeholder {
  color: #cccccc;
  font-size: 16px;
}
</style>
